Рамках данного урока мы создадим шаблон 1С-Битрикс и натянем на него базовую статическую html+css вёрстку, не реализуя ни одного динамического шаблона. В каждом последующем уроке мы будем постепенно забирать функционал из шаблона и интегрировать в компоненты.
В уроке не рассматривается процесс установки и настройки 1С-Битрикс. Данный вопрос хорошо описан в документации 1С-Битрикс.
Для реализации этого урока автор создал чистую пустую установку 1С-Битрикс без демо-контента. После создания администратора процесс установки был прерван.
ИСХОДНЫЕ КОДЫ HTML+CSS ВЁРСТКИ
Создание пустого шаблона 1С-Битрикс
В административном разделе выбираем:
Настройки → Настройки продукта → Сайты → Шаблоны Сайтов
нажимем кнопку "Добавить шаблон"
Заполняем:
- Обязательно поле "ID" - он будет использоваться для вызова шаблона в настройках сайта, а так же станет названием папки с шаблоном (заполняем латинскими буквами и цифрами, рекомендуется без пробелов и спец-символов).
- Рекомендуется поле "Название" - используется для выбора шаблона в списке. Лучше заполнить кратким уникальным текстом, позволяющим однозначно идентифицировать шаблон и то, где он используется если в системе предполагается наличие нескольких шаблонов.
- По желанию поле "Описание" - выводится только на старнице редактирования шаблонов и в списке шаблонов. Используется для краткого описания технических особенностей шаблона для администратора.
- Обязательно ставим метку "#WORK_AREA#" в поле "Внешний вид шаблона сайта"
Ждём кнопку "сохранить"
Наш пустой шаблон создан и располагается в папке /bitrix/templates/stylish/
Откроем созданный шаблон из списка шаблонов (нажав на название шаблона в списке) и перейдём в папку шаблона (нажав на путь к папке напротив поля ID):
Как мы видим несмотря на то, что мы создали абсолютно пустой шаблон в папке присутствует несколько файлов:
В том числе footer.php и header.php (пока пустые), которые мы упоминали в 1 уроке.
В дальнейшем мы опишем назначение каждого из файлов и поработаем со всеми из них, а так же дополним структуру.
Интегрируем статическую html+css вёрстку
Из исходного шаблона берём 3 папки с файлами:
- css
- img
- js
и копируем в папку /bitrix/templates/stylish/
Пока не будем обращать внимания на тот факт, что в нашем шаблоне папка img содержит не только изображения из шаблона, но и контент! На взгляд автора данной статьи это ошибка верстальщика, с которой нам ещё предстоит разобраться.
Настал этап, когда мы приступим к добавлению кода HTML разметки шаблона. Для этого возьмём макет главной страниц index.html из исходного кода шаблона.
E-mail: company@demolink.org Call Us Toll Free: +1 234 567 89 90
E-mail: company@demolink.org>
Цветами отмечены участки кода, которые относятся к разным блокам в соответствии с разметкой, проведённой в УРОКЕ 0:
- Красный - header.php (или в шаблон сайта ВЫШЕ #WORK_AREA#
- Жёлтый - footer.php (или в шаблон сайта НИЖЕ #WORKAREA#)
- Зелёный - тело страницы
Мы рекомендуем не брать код напрямую из урока, а самостоятельно найти границы блоков (например использую редактор кода notepade++ с подсветкой синтаксиса). Во-первых, это важная часть обучения процессу интеграции дизайна - правильно определить где заканчивается какой блок. А во-вторых, здесь могла быть сбита табуляция, так что код может быть менее читабелен, чем в оригинале.
Как можно заметить, мнение автора статьи о разбитии вёрстки на рабочую область подвал и шапку не совпадает с мнением автора шаблона.
Образцы созданных файлов:
- (зелёный код добавляем в содержимое страницы в корне сайта)
Теперь применим наш статический шаблон к имеющемуся сайта (состоящему пока из 1 страницы), для этого в административном разделе выбираем:
Настройки → Настройки продукта → Сайты → Сайты
Нажмём на ID интересующего нас сайта (в данном случае он один, поскольку мы используем чистую систему, однако у вас может быть список):
На странице редактирования настроек сайта нас интересует самый нижний блок - "Шаблоны". Здесь мы выберем шаблон и установим условия для его использования на сайте. Поскольку у нас всего 1 шаблон и он используется для всего сайта, то мы не будем использовать условия и оставим индекс сортировки по-умолчанию:
Если вы интегрируете шаблон на уже работающем сайте (или делаете не 1й шаблон в рамках проекта), то имеет смысл ставить для него низкий индекс сортировки и/или правило, применяющее шаблон только к конкретной папке, чтобы ваше правило с не до конца готовым шаблоном не сказалось на других разделах.
Если сейчас мы посмотрим страницу в публичной части, то увидим, что она представляет из себя текст без разметки, стилей и картинок, поскольку пути к ним в статической вёрстке отличаются от тех, что должны быть в структуре 1С-Битрикс. Для того, чтобы это исправить необходимо:
-
Добавить константу <?=SITE_TEMPLATE_PATH?> к пути всех статических файлов (в частности изображений), которая определяет путь к шаблону сайта относительно пути сайта.
Например, заменив <img src="img/img-4.png" alt=""> на <img src="<?=SITE_TEMPLATE_PATH?>/img/img-4.png" alt="">
Пренебрежём пока тем, что некоторые картинки, такие как баннеры в слайдере следует хранить не в шаблоне - мы будем облегчать его постепенно, перенося картинки в шаблоны компонентов или контент по мере необходимости (в идеале в общей папке в шаблоне страницы не должно остаться картинок не универсального значения, чтобы в дальнейшем было проще работать).
-
Добавим подключение пролога и языковых файлов в header.php начале шаблона (1-й строкой):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?><?IncludeTemplateLangFile(__FILE__);?> -
Добавим языковых файлов в footer.php (1-й строкой в файле или сразу после #WORK_AREA# в шаблоне):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();IncludeTemplateLangFile(__FILE__);?> -
Вместо статического значения <html lang="en"> укажем константу, определяющую язык сайта в 1С-Битрикс:
<html lang="<?=LANGUAGE_ID;?>-<?=strtoupper(LANGUAGE_ID);?>"> -
Внутри тега <head> вместо <title>Home</title> динамически генерирующийся заголовок:
<title><?$APPLICATION->ShowTitle()?></title> -
Добавим служебную функцию <?$APPLICATION->ShowHead();?> (она заменит нам множество других статических вызовов.
-
Удалим <meta charset="utf-8"> - реальную информацию о кодировке (из настроек сайта) на страницу выведет предыдущая функция.
-
Установим динамическое подключение стилей с помощью функции SetAdditionalCSS (это нужно для того, чтобы одни и те же стили не подключались дважды, а так же для того, чтобы 1С-Битрикс проверял изменение в стилях и сообщал об этом браузеру пользователя при повторном заходе на сайт) - $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/НАЗВАНИЕ_СТИЛЯ.css');. Сгруппируем все стили вместе с ShowHead для облегчения процесса редактирования в будущем:
<?
$APPLICATION->ShowHead();
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/bootstrap.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/responsive.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/camera.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/style.css');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:400');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:600');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:700');
?>Поскольку данная функция не поддерживает параметр media, перенесём и его значение из старых статических ссылок в текст CSS файлов.
Например, для /css/bootstrap.css первой строкой добавим:
@media screen -
Установим динамическое подключение JS библиотек аналогично стилям (обратим внимание читателя, что проблема дублирования подключения библиотек JS важнее, поскольку может приводить к ошибкам работы функционала). Воспользуемся функцией AddHeadScript - $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/НАЗВАНИЕ_БИБЛИОТЕКИ.js");. Сгруппируем их так же вместе с CSS и ShowHead:
<?
$APPLICATION->ShowHead();
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/bootstrap.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/responsive.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/camera.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/style.css');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:400');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:600');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com/css?family=Open+Sans:700');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.js");
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.easing.1.3.js");
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/camera.js");
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/jquery.ui.totop.js");
?>ВАЖНО. Мы оставили несколько библиотек подключенными по обычному сценарию.
JS, подключаемые для устаревших браузеров (поскольку для них стоит условие подключения:
<!--[if lt IE 8]>
http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode">http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="<?=SITE_TEMPLATE_PATH?>/css/docs.css" type="text/css" media="screen">
<link rel="stylesheet" href="<?=SITE_TEMPLATE_PATH?>/css/ie.css" type="text/css" media="screen">
<![endif]-->JS, подключаемые в конце страницы, поскольку эти библиотеки должны подключаться после сборки всей страницы, а не в шапке, как все остальные:
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/bootstrap.js"></script> Так же мы добавили подключение ещё одного JS, которого раньше не было в HTML коде:
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/superfish.js"></script> Это библиотека, отвечающая за раскрытие выпадающего меню. Она вызывается в bootstrap.js, однако автор вёрстки сделал её подключение зависящим от местонахождения страницы, что приводит к ошибке в случае динамического шаблона (как у нас). Поэтому мы вынесли подключение в шаблон.
Важно не забыть добавить при их подключении константу <?=SITE_TEMPLATE_PATH?>, как и для картинок.
-
Добавляем константу <?$APPLICATION->ShowPanel();?> после открытия <body> для вывода панели инструментов в публичной части сайта (для пользователей обладающих соответствующим административным доступом).
-
Удаляем строки:
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">Их динамические значения уже выводятся с помощью $APPLICATION->ShowHead();
-
Удаляем <meta name="author" content="Your name"> - в будущих уроках мы реализуем её вывод программно.
-
Опционально размещаем файл screen.gif в корне шаблона - он будет использоваться для иллюстрации шаблона в административном разделе и его наличие не обязательно. Файл может быть размещён в натуральную величину - для списка система автоматически сгенерирует миниатюру.
В заключении урока 1
Получившийся статический шаблон 1С-Битрикс и статичную же страницу Index.php для корня сайта вы можете скачать в репозитории . На этом урок 1 закончен - мы получили полноценный (хотя и статичный) шаблон для 1С-Битрикс на основе HTML шаблона BootStrap. Теперь на его основе можно создать сайт.
В последующих уроках мы последовательно разберём перевод статичного контента данного шаблона в формат компонентов 1С-Битрикс, а так же частично переработаем структуру стилей для более удобной работы редакторов.
